<template>
  <Card>
    <div style="overflow: hidden; height: 40px;">
      <Input v-model="searchValue" search enter-button placeholder="请输入关键字……" style="float: right; width: 250px;"
             @on-change="getOrders"/>
    </div>
    <Table :columns="columns" :data="dataList" style="margin-top: 10px;"></Table>
    <div class="page">
      <Page :total="pageTotal" :page-size="pageSize" :current="pageNum" @on-change="changePage"></Page>
    </div>
    <Modal v-model="goodModal">
      <p slot="header">
        <span>商品信息</span>
      </p>
      <Form :label-width="100">
        <FormItem label="商品编号：">
          <span>{{good.id}}</span>
        </FormItem>
        <FormItem label="商品名称：">
          <span>{{good.name}}</span>
        </FormItem>
        <FormItem label="商品单价：">
          <span>{{good.price}}</span>
        </FormItem>
        <FormItem label="商品版本：">
          <span>{{good.version}}</span>
        </FormItem>
        <FormItem label="商品描述：">
          <span>{{good.description}}</span>
        </FormItem>
        <FormItem label="商品备注：">
          <span>{{good.note}}</span>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="goodModal = false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="reactionModal">
      <p slot="header">
        <span>订单反馈</span>
      </p>
      <Form ref="reaction" :model="reaction" :rules="reactionRules" :label-width="100">
        <FormItem prop="reactionType" label="反馈类型：">
          <Select v-model="reaction.reactionType">
            <Option v-for="reactionType in reactionTypes"
                    :key="reactionType.value"
                    :value="reactionType.value">
              {{reactionType.name}}
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="note" label="商品反馈：">
          <Input v-model="reaction.note" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入反馈"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="reactionLoading" @click="saveReaction">提交</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
  export default {
    name: "order-list",
    data() {
      return {
        // 页码
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // 页总数
        pageTotal: 0,
        // 搜索信息
        searchValue: "",
        // 厂商id
        factoryId: null,
        // 表数据
        dataList: [],
        columns: [
          {
            title: "编号",
            key: "id",
            width: 150,
          }, {
            title: "名称",
            key: "name",
            render: ((h, params) => {
              return h('div', [
                h('span', null, params.row.good.name)
              ])
            })
          }, {
            title: "数量",
            key: "number"
          }, {
            title: "总价",
            key: "money"
          }, {
            title: "时间限制",
            width: 200,
            key: "deadLine"
          }, {
            title: "是否付款",
            key: "isPay",
            render: (h, params) => {
              return h('div', [
                h('span', {}, params.row.isPay ? "已付款" : "未付款")
              ], '')
            }
          }, {
            title: "付款方式",
            key: "pay",
            render: (h, params) => {
              let payType = "";
              switch (params.row.pay) {
                case 1:
                  payType = "支付宝";
                  break;
                case 2:
                  payType = "微信";
                  break;
                default:
                  payType = "无";
                  break;
              }
              return h('div', [
                h('span', {}, payType)
              ], '')
            }
          }, /*{
            title: "验收方式",
            key: "check"
          },*/ {
            title: "操作",
            key: "action",
            width: 300,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      this.goodModal = true;
                      this.good = params.row.good;
                    }
                  }
                }, '查看商品'),
                h('Button', {
                  props: {
                    type: 'success',
                    disabled: params.row.isPay
                  },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        path:"/buy",
                        query:{
                          orderId: params.row.id,
                        }
                      });
                    }
                  }
                }, '支付'),
                h('Button', {
                  props: {
                    type: 'info'
                  },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.reactionLoading = false;
                      this.reactionModal = true;
                      this.$refs['reaction'].resetFields();
                      this.reaction = {
                        id: params.row.id,
                        reactionType: params.row.reactionType,
                        note: params.row.note
                      }
                    }
                  }
                }, '反馈'),
              ])
            }
          }
        ],
        // 商品模态框
        goodModal: false,
        // 商品数据
        good: {
          id: 0,
          name: "",
          price: 0.00,
          version: "",
          description: "",
          note: "",
        },
        // 反馈模态框
        reactionModal: false,
        // 反馈表单
        reaction: {
          id: 0,
          reactionType: null,
          note: "",
        },
        // 反馈类型
        reactionTypes: [
          {
            name: "信息错误",
            value: 1,
          },
          {
            name: "未发货",
            value: 2
          }
        ],
        // 反馈验证规则
        reactionRules: {
          reactionType: [
            {required: true, message: '反馈类型不能为空', type: 'number', trigger: 'blur'}
          ],
          note: [
            {required: true, message: '商品反馈不能为空', trigger: 'blur'}
          ]
        },
        // 反馈提交加载
        reactionLoading: false
      }
    },
    methods: {
      // 翻页
      changePage (pageNo) {
        // 更改当前页
        this.pageNum = pageNo;
        // 重新获取数据
        this.getOrders();
      },
      getOrders() {
        this.$requests.get("/order/getOrders", {
          search: this.searchValue,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }).then(res => {
          if (res.data.code === 0) {
            this.dataList = res.data.data.list;
            this.pageTotal = res.data.data.total;
            this.pageNum = res.data.data.pageNum;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      saveReaction() {
        this.$refs["reaction"].validate((valid) => {
          if (valid) {
            this.reactionLoading = true;
            this.$requests.post("/order/update", this.reaction).then(res => {
              if (res.data.code === 0) {
                this.$Message.success("提交成功");
                this.reactionModal = false;
                this.getOrders();
              } else {
                this.$Message.error(res.data.msg);
              }
              // 取消按钮加载状态
              setTimeout(() => {
                this.reactionLoading = false;
              }, 500)
            })
          }
        })
      }
    },
    created() {
      this.getOrders();
    }
  }
</script>

<style scoped>
  .page {
    margin-top: 10px;
    text-align: right;
  }
</style>
